<!--字典类型-->
<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键字" prop="name">
                    <el-input
                        v-model="queryParams.keywords"
                        placeholder="字典类型名称/编码"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery()"
                        ><i-ep-search />搜索</el-button
                    >
                    <el-button @click="resetQuery()"
                        ><i-ep-refresh />重置</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <el-card shadow="never" class="table-container">
            <template #header>
                <el-button
                    v-hasPerm="['sys:dict_type:add']"
                    type="success"
                    @click="openDialog()"
                    ><i-ep-plus />新增</el-button
                >
                <el-button
                    type="danger"
                    :disabled="ids.length === 0"
                    @click="handleDelete()"
                    ><i-ep-delete />删除</el-button
                >
            </template>
            <el-table
                v-loading="loading"
                highlight-current-row
                :data="dictTypeList"
                border
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="字典类型名称" prop="name" width="200" />
                <el-table-column label="字典类型编码" prop="code" width="200" />
                <el-table-column label="状态" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 1" type="success"
                            >启用</el-tag
                        >
                        <el-tag v-else type="info">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center" />
                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="220"
                >
                    <template #default="scope">
                        <el-button
                            type="primary"
                            link
                            size="small"
                            @click.stop="openDictDialog(scope.row)"
                            ><i-ep-Collection />字典数据</el-button
                        >
                        <el-button
                            v-hasPerm="['sys:dict_type:edit']"
                            type="primary"
                            link
                            size="small"
                            @click.stop="openDialog(scope.row.id)"
                            ><i-ep-edit />编辑</el-button
                        >
                        <el-button
                            v-hasPerm="['sys:dict_type:delete']"
                            type="primary"
                            link
                            size="small"
                            @click.stop="handleDelete(scope.row.id)"
                            ><i-ep-delete />删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-if="total > 0"
                v-model:total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="handleQuery"
            />
        </el-card>
        <el-dialog
            v-model="dialog.visible"
            :title="dialog.title"
            width="500px"
            @close="closeDialog"
        >
            <el-form
                ref="dataFormRef"
                :model="formData"
                :rules="rules"
                label-width="80px"
            >
                <el-form-item label="字典名称" prop="name">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入字典名称"
                    />
                </el-form-item>
                <el-form-item label="字典编码" prop="code">
                    <el-input
                        v-model="formData.code"
                        placeholder="请输入字典编码"
                    />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="formData.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="formData.remark"
                        type="textarea"
                        placeholder="字典类型备注"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit"
                        >确 定</el-button
                    >
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <!--字典数据弹窗-->
        <el-dialog
            v-model="dictDataDialog.visible"
            :title="dictDataDialog.title"
            width="1000px"
            @close="closeDictDialog"
        >
            <dict-item
                v-model:typeCode="selectedDictType.typeCode"
                v-model:typeName="selectedDictType.typeName"
            />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { DictTypeQuery, DictTypePageVO, DictTypeForm } from '@/api/dict/model'
import DictAPI from '@/api/dict'
// store
// state
const dataFormRef = ref<ElForm>()
const selectedDictType = reactive({ typeCode: '', typeName: '' }) // 当前选中的字典类型
const loading = ref(false)
const formData = reactive<DictTypeForm>({
    status: 1,
})
const ids = ref<number[]>([])
const dialog = reactive({
    title: '',
    visible: false,
})
const dictDataDialog = reactive({
    title: '',
    visible: false,
})
const queryFormRef = ref<ElForm>()
const dictTypeList = ref<DictTypePageVO[]>()
const queryParams = reactive<DictTypeQuery>({
    pageNum: 1,
    pageSize: 10,
})
const total = ref(0)
const rules = reactive({
    name: [{ required: true, message: '请输入字典类型名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入字典类型编码', trigger: 'blur' }],
})
// computed
// action
/** 查询 */
function handleQuery() {
    //   loading.value = true;
    DictAPI.getDictTypePage(queryParams)
        .then((data) => {
            dictTypeList.value = data.list
            total.value = data.total
        })
        .finally(() => {
            //   loading.value = false;
        })
}
/**
 * 重置查询
 */
function resetQuery() {
    queryFormRef.value.resetFields()
    queryParams.pageNum = 1
    handleQuery()
}
/**
 * 打开字典类型表单弹窗
 *
 * @param dicTypeId 字典类型ID
 */
function openDialog(dicTypeId?: number) {
    dialog.visible = true
    if (dicTypeId) {
        dialog.title = '修改字典类型'
        DictAPI.getDictTypeForm(dicTypeId).then((data) => {
            Object.assign(formData, data)
        })
    } else {
        dialog.title = '新增字典类型'
    }
}
/** 删除字典类型 */
function handleDelete(dictTypeId?: number) {
    const dictTypeIds = [dictTypeId || ids.value].join(',')
    if (!dictTypeIds) {
        ElMessage.warning('请勾选删除项')
        return
    }

    ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        DictAPI.deleteDictTypes(dictTypeIds).then(() => {
            ElMessage.success('删除成功')
            resetQuery()
        })
    })
}
/** 行复选框选中  */
function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id)
}
/** 打开字典数据弹窗 */
function openDictDialog(row: DictTypePageVO) {
    dictDataDialog.visible = true
    dictDataDialog.title = '【' + row.name + '】字典数据'

    selectedDictType.typeCode = row.code
    selectedDictType.typeName = row.name
}
/** 关闭字典类型弹窗 */
function closeDialog() {
    dialog.visible = false
    resetForm()
}
/**  重置字典类型表单 */
function resetForm() {
    dataFormRef.value.resetFields()
    dataFormRef.value.clearValidate()

    formData.id = undefined
    formData.status = 1
}
/** 字典类型表单提交 */
function handleSubmit() {
    dataFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            loading.value = false
            const dictTypeId = formData.id
            if (dictTypeId) {
                DictAPI.updateDictType(dictTypeId, formData)
                    .then(() => {
                        ElMessage.success('修改成功')
                        closeDialog()
                        handleQuery()
                    })
                    .finally(() => (loading.value = false))
            } else {
                DictAPI.addDictType(formData)
                    .then(() => {
                        ElMessage.success('新增成功')
                        closeDialog()
                        handleQuery()
                    })
                    .finally(() => (loading.value = false))
            }
        }
    })
}
/**  关闭字典数据弹窗 */
function closeDictDialog() {
    dictDataDialog.visible = false
}
// 生命周期
onMounted(() => {
    handleQuery()
})
</script>

<style scoped></style>
